{extend name="common/base"/}
{block name="style"}
<style>
	.layui-tab-content{
		padding: unset;
	}
	.layui-td-gray{
		width: 90px;
	}
</style>
{/block}

<!-- 主体 -->
{block name="body"}
<h3 style="padding: 10px;">事项管理</h3>
<form class="layui-form">
	<table class="layui-table">
		<tr>
			<td class="layui-td-gray">事项名称<font>*</font></td>
			<td>
				<input type="text" name="name" value="{notempty name="$detail.name"}{$detail.name}{/notempty}" lay-verify="required" autocomplete="off" placeholder="请输入事项名称" lay-reqText="请输入事项名称" class="layui-input">
			</td>
			<td class="layui-td-gray">事项名称<br>（口头语）</td>
			<td>
				<input type="text" name="oral_name" value="{notempty name="$detail.oral_name"}{$detail.oral_name}{/notempty}" autocomplete="off" placeholder="请输入事项名称" lay-reqText="请输入事项名称" class="layui-input">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">地区<font>*</font></td>
			<td>
				<select name="area_id" id="area_id" lay-filter="area_id" lay-search lay-verify="required" lay-reqText="请选择地区">
					<option value="">请选择</option>
					{volist name="$area_list" id="v"}
					<option value="{$v.id}" {notempty name="$detail.area_id"}{eq name="$detail.area_id" value="$v.id"} selected{/eq}{/notempty}>{$v.name}</option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray">上级目录<font>*</font></td>
			<td>
				<select name="directory_id" id="directory_id" lay-verify="required" lay-search lay-reqText="请选择上级目录">
					<option value="">请选择</option>
					{notempty name="$detail.area_id"}
					{volist name="$directory_list" id="v"}
					<option value="{$v.id}" {notempty name="$detail.directory_id"}{eq name="$detail.directory_id" value="$v.id"} selected{/eq}{/notempty}>{$v.name}</option>
					{/volist}
					{/notempty}
				</select>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">实施主体<font>*</font></td>
			<td>
				<select name="unit_id" id="unit_id" lay-search lay-reqText="请选择部门">
					<option value="">请选择</option>
					{notempty name="$detail.unit_id"}
					{volist name="$unit_list" id="v"}
					<option value="{$v.id}" {notempty name="$detail.unit_id"}{eq name="$detail.unit_id" value="$v.id"} selected{/eq}{/notempty}>{$v.name}</option>
					{/volist}
					{/notempty}
				</select>
			</td>
		</tr>

	</table>

	<div class="py-3">
		<input type="hidden" name="id" value="{$id}">
		<button class="layui-btn layui-btn-normal" id="submit1" lay-submit="" lay-filter="webform">立即提交</button>
	</div>
</form>

{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool', 'treeGrid','oaTool'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,treeGrid = layui.treeGrid,oaTool = layui.oaTool,element = layui.element;

		oaTool.addFile({exts:'png|jpg|gif|jpeg|doc|docx|ppt|pptx|xls|xlsx|pdf'});
		oaTool.addFile({btn:'uploadBtn1',exts:'png|jpg|gif|jpeg|doc|docx|ppt|pptx|xls|xlsx|pdf',box: `fileBox1`});

		// oaTool.addFile({exts:'doc|docx|ppt|pptx|xls|xlsx|png|jpg|jpeg|pdf'});


		//监听提交
		form.on('submit(webform)', function(data){
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					setTimeout(function () {
						parent.location.reload();
					}, 1000);

				}
			}
			tool.post("/matter/matter/ownadd", data.field, callback);
			return false;
		});

		//审查要点
		$('#add_points').on('click',function(){
			let sort = Number($('[name="points_key"]').last().val());
			sort = sort?sort+1:1;
			var html = '';
			html += `<table class="layui-table layui-table-min more_interfix">
						<tr>
							<input type="hidden" name="points_key" value="${sort}">
                            <td class="layui-td-gray"><font>*</font>审查要点${sort}</td>
                            <td colspan="5">
								<textarea name="points[content][]" placeholder="请输入审查要点" class="layui-textarea"></textarea>
								<input type="hidden" name="points[id][]" class="layui-input" value="0">
							</td>
							<td><a class="layui-btn layui-btn-danger layui-btn-xs" data-id="0" lay-event="del">删除</a></td>
                        <tr>
                      </table>`;
			$("#points").append(html).find('.tr-none').remove();
			sort++;
			form.render();
		});
		$('#points').on('click', '[lay-event="del"]', function() {
			var that=$(this);
			var _id = that.data('id');
			if(_id>0){
				layer.confirm('确定删除该数据项？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					$.ajax({
						url: "/matter/matter/points_delete",
						type:'post',
						data: {id: _id},
						success: function(res) {
							layer.msg(res.msg);
							if (res.code == 0) {
								that.parents(".more_interfix").remove();
							}
						}
					})
					layer.close(index);
				});
			}
			else{
				that.parents(".more_interfix").remove();
			}
		});

		//常见问题
		$('#add_question').on('click',function(){
			let sort = Number($('[name="question_key"]').last().val());
			sort = sort?sort+1:1;
			var html = '';
			html += `<table class="layui-table layui-table-min more_interfix">
						<tr>
							<input type="hidden" name="question_key" value="${sort}">
                            <td class="layui-td-gray"><font>*</font>常见问题${sort}</td>
                            <td colspan="5">
								<textarea name="question[questions][]" placeholder="请输入常见问题" class="layui-textarea"></textarea>
								<input type="hidden" name="question[id][]" class="layui-input" value="0">
							</td>
							<td><a class="layui-btn layui-btn-danger layui-btn-xs" data-id="0" lay-event="del">删除</a></td>
                        <tr>
                        <tr>
							<td class="layui-td-gray"><font>*</font>解决方案</td>
							<td colspan="6">
								<textarea name="question[answers][]" placeholder="请输入解决方案" class="layui-textarea"></textarea>
							</td>
						</tr>
                      </table>`;
			$("#question").append(html).find('.tr-none').remove();
			sort++;
			form.render();
		});
		$('#question').on('click', '[lay-event="del"]', function() {
			var that=$(this);
			var _id = that.data('id');
			if(_id>0){
				layer.confirm('确定删除该数据项？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					$.ajax({
						url: "/matter/matter/question_delete",
						type:'post',
						data: {id: _id},
						success: function(res) {
							layer.msg(res.msg);
							if (res.code == 0) {
								that.parents(".more_interfix").remove();
							}
						}
					})
					layer.close(index);
				});
			}
			else{
				that.parents(".more_interfix").remove();
			}
		});

		//主题选择
		form.on('radio(service_type)', function(data){
			$.ajax({
				type:"get",
				url:"/matter/matter/getTheme?id="+data.value,
				dataType:"json",
				success:function (d) {
					//对应的值传回，拼出html下拉框语句
					var tmp='';
					for (var i in d){
						if(d[i].id>0){
							tmp +=`<input type="checkbox" name="theme_id[]" title="${d[i].name}" value="${d[i].id}" lay-skin="primary">`;
						}
					}
					$("#theme_id").html(tmp);
					form.render();
				},error:function () {
					layer.alert('请求失败');
				}
			});
		});

		//行使层级
		form.on('radio(exercise_level)', function(data){
			getUnit();
		});

		//省
		form.on('select(province)',function (data) {
			area_below($("#city"),data.value);
			$("#county").html('');
			$("#streets").html('');
			$("#village").html('');
		})
		//市
		form.on('select(city)',function (data) {
			area_below($("#county"),data.value);
			$("#streets").html('');
			$("#village").html('');
		})
		//县
		form.on('select(county)',function (data) {
			area_below($("#streets"),data.value);
			$("#village").html('');
		})
		//街道
		form.on('select(streets)',function (data) {
			area_below($("#village"),data.value);
		})
		//村居
		form.on('select(village)',function (data) {
			area_below('',data.value);
		})

		//获取下级地区
		function area_below(obj,pid=0){
			getUnit(pid)
			$.ajax({
				type:"get",
				url:"/matter/matter/getAreaBelow?id="+pid,
				dataType:"json",
				success:function (d) {
					if(d.length>0) {
						//对应的值传回，拼出html下拉框语句
						var tmp = '<option value="">请选择</option>';
						for (var i in d) {
							tmp += '<option value="' + d[i].id + '">' + d[i].name + '</option>';
						}
						obj.html(tmp);
						form.render();
					}
				},error:function () {
					layer.alert('请求失败');
				}
			});
		}


		//地区选择
		let area_id = $('#area_id').val();
		let directory_id = $('#directory_id').val();
		let unit_id = $('#unit_id').val();

		if(area_id && !directory_id){
			getDirectory(area_id);
		}
		if(area_id && !unit_id){
			getUnit(area_id);
		}
		form.on('select(area_id)',function (data) {
			let area_id = data.value;
			getUnit(area_id);
			getDirectory(area_id);
		})
		//获取部门
		function getUnit(id){
			$.ajax({
				type:"get",
				url:"/matter/matter/getUnit?id="+id,
				dataType:"json",
				success:function (d) {
					if(d.length>0){
						//对应的值传回，拼出html下拉框语句
						var tmp='<option value="">请选择，输入关键字检索</option>';
						for (var i in d){
							tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
						}
						$("#unit_id").html(tmp);
						form.render();
					}

				},error:function () {
					layer.alert('请求失败');
				}
			});
		}
		//获取目录
		function getDirectory(id){
			$.ajax({
				type:"get",
				url:"/matter/matter/getDirectory?id="+id,
				dataType:"json",
				success:function (d) {
					if(d.length>0){
						//对应的值传回，拼出html下拉框语句
						var tmp='<option value="">请选择，输入关键字检索</option>';
						for (var i in d){
							tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
						}
						$("#directory_id").html(tmp);
						form.render();
					}

				},error:function () {
					layer.alert('请求失败');
				}
			});
		}


	}
</script>
{/block}
<!-- /脚本 -->
